<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="container" id="app">
  <h1>我自己写的登录页！！！</h1>
  <form class="form-signin" action="#">
    <h2 class="form-signin-heading">Please sign in</h2>
    <p>
      <label for="username" class="sr-only">Username</label>
      <input type="text" id="username" name="username"  v-model="user.username" class="form-control" placeholder="Username" required autofocus>
    </p>
    <p>
      <label for="password" class="sr-only">Password</label>
      <input type="password" id="password" v-model="user.password" name="password" class="form-control" placeholder="Password" required>
    </p>
    <p style="color: red">{{msg}}</p>
    <button class="btn btn-lg btn-primary btn-block" type="button" @click="login">Sign in</button>
  </form>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      user:{},
      msg:''
    },
    methods:{
      login(){
        axios.post("/login",'username='+this.user.username+'&password='+this.user.password,{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          }
        }).then((res)=>{
            console.log(res.data);
            if(res.data.flag==true){
               window.location.href="index.html";
            }else{
              this.msg = res.data.message;
            }
        });
      }
    }
  });
</script>
</body>
</html>
